
<div style="height: 500px">
    <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
                <h1>{{slide.headertext}}</h1>
                <p>{{slide.text}}</p>
            </div>
        </slide>
    </carousel>
</div>


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
        <span id="latestPosts" ng-bind="getPostsForPage"></span>
        <div ng-repeat="post in posts|searchFilters:searchString | orderBy:orderPostBy:selectedPostOrder.reverse" >
            <div class="col-lg-4 {{post.articletype.S}}">
                <h2>{{post.title.S}}</h2>
                <p>{{post.post.S| limitTo:147}}...</p>
                <p><a class="btn btn-default" scrolling-to={{post.title.S}} role="button">View details &raquo;</a></p>
            </div>
        </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->

    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <span id="latestPosts" ng-bind="getPostsForPage"></span>
    <div ng-repeat="post in posts|searchFilters:searchString | orderBy:orderPostBy:selectedPostOrder.reverse" >
        <div class="row featurette">
            <div id={{post.title.S}}>
            <div class="col-md-7">
                <!--<h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2> -->
                <h2 class="featurette-heading">{{post.title.S}}</h2>
                <div ng-bind-html="post.post.S| to_trusted"></div>
            </div>
            </div>
        </div>
    </div>
</div>

    <hr class="featurette-divider">
